<html> 

<head> 

<title>011 | Plasma Effect | J3D</title> 

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 

<link rel="stylesheet" href="common/common.css"/>
<script type="text/javascript" src="common/common.js"></script>

<script type="text/javascript" src="../build/j3d.js"></script>

<script id="effect" type="x-shader/x-filter">
	//#name PlasmaEffect
	//#author bartekd
	
	//#include CommonFilterInclude
	
	//#vertex
	//#include BasicFilterVertex
	
	//#fragment
	uniform sampler2D uTexture;	
	varying vec2 vTextureCoord;

	void main(void) {
		vec2 ca = vec2(0.1, 0.2);
		vec2 cb = vec2(0.7, 0.9);
		float da = distance(vTextureCoord, ca);
		float db = distance(vTextureCoord, cb);
		
		float t = uTime * 0.5;
		
		float c1 = sin(da * cos(t) * 16.0 + t * 4.0);
		float c2 = cos(vTextureCoord.y * 8.0 + t);
		float c3 = cos(db * 14.0) + sin(t);
	
		float p = (c1 + c2 + c3) / 3.0;
	
		gl_FragColor = texture2D(uTexture, vec2(p, p));
	}
</script>

<script>
	
	var engine, ctex, texture, texture2, texture3, post;
	
	function init() {
		if(!checkWebGL()) return;
		
		engine = new J3D.Engine();

		texture = new J3D.Texture("models/textures/colorramp1.png");
		texture2 = new J3D.Texture("models/textures/colorramp2.png");
		texture3 = new J3D.Texture("models/textures/colorramp3.png");
		
		ctex = texture;

		post = new J3D.Postprocess(engine);
		post.filter = new J3D.ShaderUtil.parseGLSL(document.getElementById("effect").firstChild.nodeValue);
		post.render = function() {
			J3D.Time.tick();
			this.renderEffect(ctex.tex);
		}

		draw();
	}
	
	function draw() {
		requestAnimationFrame(draw);	
		
		if(document.getElementById("ra").checked) ctex = texture;
		if(document.getElementById("rb").checked) ctex = texture2;
		if(document.getElementById("rc").checked) ctex = texture3;
		
		post.render();
	}
	
</script>

</head> 

<body onload="init();">
	
	<script>
		setLabels("011. Plasma effect");
	</script>
		<div id="details">
		<input type='radio' id="ra" name='ramp' checked> color A 
		<input type='radio' id="rb" name='ramp'> color B 
		<input type='radio' id="rc" name='ramp' value='c'> color C
	</div>	
	
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24294554-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body> 

</html> 












